<template>
  <div class="q-pa-md q-gutter-sm">
    <t-btn label="Click me" color="primary" @click="layout = true" />

    <t-dialog v-model="layout">
      <t-layout view="Lhh lpR fff" container class="bg-white text-dark">
        <t-header class="bg-primary">
          <t-toolbar>
            <t-btn flat @click="drawer = !drawer" round dense icon="menu" />
            <t-toolbar-title>Header</t-toolbar-title>
            <t-btn flat @click="drawerR = !drawerR" round dense icon="menu" />
            <t-btn flat v-close-popup round dense icon="close" />
          </t-toolbar>
        </t-header>

        <t-footer class="bg-black text-white">
          <t-toolbar>
            <t-toolbar-title>Footer</t-toolbar-title>
          </t-toolbar>
        </t-footer>

        <t-drawer
          bordered
          v-model="drawer"
          :width="200"
          :breakpoint="600"
          class="bg-grey-3 text-dark q-pa-sm"
        >
          <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
        </t-drawer>

        <t-drawer
          side="right"
          bordered
          v-model="drawerR"
          :width="200"
          :breakpoint="300"
          class="bg-grey-3 text-dark q-pa-sm"
        >
          <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
        </t-drawer>

        <t-page-container>
          <t-page padding>
            <p v-for="n in contentSize" :key="n">
              {{ lorem }}
            </p>
          </t-page>
        </t-page-container>
      </t-layout>
    </t-dialog>
  </div>
</template>

<script>
  import { computed, ref } from 'vue';

  export default {
    setup() {
      const moreContent = ref(true);

      return {
        layout: ref(false),

        moreContent,
        contentSize: computed(() => (moreContent.value ? 150 : 5)),
        drawer: ref(false),
        drawerR: ref(false),

        lorem:
          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus, ratione eum minus fuga, quasi dicta facilis corporis magnam, suscipit at quo nostrum!',
      };
    },
  };
</script>
